<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="上课记录详情"></sc-title>
                    <div>
                        <el-tabs v-model="activeName" @tab-click="tabClickFun">
                            <el-tab-pane label="上课情况" name="first">
                                <el-form ref="form" label-width="120px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item label="机构名称:">{{info?.agent?.name}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="学员姓名:">{{info?.user?.name}}</el-form-item>
                                                        <el-form-item label="课程名称:">{{info?.course?.name}}</el-form-item>
                                                        <el-form-item label="正确数量:">{{info.rightNumber}}</el-form-item>
                                                        <el-form-item label="开始时间:">{{info.startTime}}</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="教练姓名:">{{info?.teacher?.name}}</el-form-item>
                                                        <el-form-item label="总单词数:"><div style="color: red;">{{info.totalWords}}</div></el-form-item>
                                                        <el-form-item label="错误数量:">{{info.wrongNumber}}</el-form-item>
                                                        <el-form-item label="结束时间:">{{info.endTime}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="学员评星:">{{info.userReputation}}星</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="教练评星:">{{info.teacherReputation}}星</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item label="学员评价:">{{info.userComment}}</el-form-item>
                                                        <el-form-item label="教练评价:">{{info.teacherComment}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <template v-if="info.reputation">
                                                            <el-form-item label="校区评星:">
                                                                {{ info.reputation }}星
                                                            </el-form-item>
                                                        </template>
                                                        <template v-if="!info.reputation && permission.reputation">
                                                            <el-form-item label="校区评星:">
                                                                <el-select v-model="form.reputation" placeholder="请选择">
                                                                    <el-option
                                                                        v-for="item in reputationOptions"
                                                                        :key="item.id"
                                                                        :label="item.name"
                                                                        :value="item.id">
                                                                        </el-option>
                                                                </el-select>
                                                                <el-button style="margin-left: 10px;" type="primary" :loading="isSaveing" @click="submitReputation">保存</el-button>
                                                            </el-form-item>
                                                        </template>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-form>
                            </el-tab-pane>

                            <el-tab-pane label="抗遗忘记录" name="review" >
                                <reviewCycle :learn="info"  v-if="activeName == 'review'" ></reviewCycle>
                            </el-tab-pane>

                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

</template>

<script>
import reviewCycle from './components/reviewCycle.vue'
import { rolePermission } from '@/utils/permission'
export default {
    components: {
        reviewCycle
    },
    data() {
        return {
            visible: false,
            loading: false,
            isSaveing: false,
            dialog: {
                audit: false
            },
            info: {},
            infoId: null,
            activeName: 'first',
            permission: {
                reputation: rolePermission('record-learn-reputation')
			},
            reputationOptions: [
                {id: 1, name: '1星'},
                {id: 2, name: '2星'},
                {id: 3, name: '3星'},
                {id: 4, name: '4星'},
                {id: 5, name: '5星'},
            ],
            form: {
                reputation: ''
            }
        }
    },
    mounted() {
     
    },
    methods: {
        open(id, activeName) {
            this.activeName = activeName || 'first'
            this.visible = true
            this.infoId = id
            this.getData(id)
        },
        async getData(id) {
            this.loading = true
            await this.$API.learn.action.get({id: id}).then((res) => {
                this.info = res.data
                this.loading = false
            }, () => {
                this.loading = false
            })
        },
        submitReputation() {
            if (!this.form.reputation) {
                this.$message.error('请选择校区评星')
                return
            }
            this.form.id = this.info.id
            this.isSaveing = true
            this.$API.learn.updateReputation.put(this.form).then((res) => {
                this.isSaveing = false
                if (res.error == 0) {
                    this.$message.success('保存成功')
                    this.getData(this.infoId)
                }
            }, () => {
                this.isSaveing = false
            })
        },
        handleSuccess() {
            this.getData(this.infoId)
        }
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}
</style>
